<!DOCTYPE HTML>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title>五星红旗无辅助线</title>  
    </head>  
    <body>  
        <canvas id="canvas" width="600px" height="400px" style="border: 1px solid;"></canvas>         
    <script>
		// 通过id选择元素
		var can = document.getElementById("canvas");
		var get = can.getContext("2d");
		get.beginPath();
		get.fillStyle="red";
		get.fillRect(0,0,600,400);
		get.closePath();
		//自定义函数
		function createStart(get,x0,y0,r,angle){
			get.beginPath();
			var dig = Math.PI*2/5*2;
			for (var i=0;i<5;i++) {
				var x = x0 + Math.cos(Math.PI/2+dig*i+angle)*r;
				var y = y0 + Math.sin(Math.PI/2+dig*i+angle)*r
				get.lineTo(x,y);
			}
			     get.closePath();
				 get.fillStyle="yellow";
				 get.fill();
			
		}
		// 开始调用该函数画
		createStart(get,100,100,60,0);
		createStart(get,200,40,20,Math.PI/2+Math.atan2(3,5));
		createStart(get,240,80,20,Math.PI/2+Math.atan2(1,7));
		createStart(get,240,140,20,Math.atan2(7,2));
		createStart(get,200,180,20,Math.atan2(5,4));
        </script>  
    </body>  
</html>  